<template>
  <div>
    <h2>单选树形</h2>
    <DynamicTable :data="tableData"
                  :table-config="tableConfig"
                  select
                  row-key="t2"
                  :select-multiple="false"
                  @selection-change="selectionChange"
                  :select-config="selectConfig"
                  @row-click="rowClick"
    >
      <template #t2_header="scopt">
        <div>
          {{ scopt.item.label }}5555
        </div>
      </template>
      <el-table-column label="测试是否支持原生">
        <el-table-column label="原生子项1" prop="tableColumn1"></el-table-column>
        <el-table-column label="原生子项2" prop="tableColunm2"></el-table-column>
      </el-table-column>
    </DynamicTable>
  </div>
</template>

<script>
import {SelectConfig, TableConfig} from "@localModules/ZhiXinLib/element-components/dynamic-table/TableType";
import DynamicTable from "@localModules/ZhiXinLib/element-components/dynamic-table";

export default {
  name: "Demo",
  components:{
    DynamicTable
  },
  data(){
    return {
      selectConfig: new SelectConfig({
        selectable: (row, index) => {
          console.log(row, index)
          if (index % 2 === 0) {
            return false
          }
          return true
        }
      }),
      tableData: [
        {
          t1: '1',
          t2: '1',
          t3: '1',
          t4: '1',
          children:[
            {
              t1: '1-1',
              t2: '1-1',
              t3: '1-1',
              t4: '1-1',
            }
          ]
        },
        {
          t1: '1',
          t2: '2',
          t3: '1',
          t4: '1',
          t6: '1',
          t7: '2',
          tableColumn1: 'tableColumn1',
          tableColunm2: 'tableColunm2',
        },
      ],
      tableConfig: new TableConfig({}, [
        {
          label: '动态配置1',
          typeSlots: (h, item) => {
            return {
              header: (props) => {
                return [
                  h('div', item.label + '动态函数渲染插槽')
                ];
              }
            }
          },
          children: [
            {
              label: 't2',
              prop: 't2',
              formatter: (row, column, cellValue, index) => {
                return "格式化显示" + cellValue;
              },
            },
            {
              label: '测试然后默认插槽',
              prop: 't3',
              minWidth: '150px',
              typeSlots: (h, item) => {
                return {
                  default: (props) => {
                    return [
                      h('div', item.label + '动态函数渲染插槽')
                    ];
                  }
                }
              },
            },
          ]
        },
        {
          label: 't4',
          prop: 't4'
        },
        {
          label: 't5',
          prop: 't5',
        },
        {
          label: 't6',
          children: [
            {
              label: 't7',
              prop: 't7',
            },
            {
              label: 't8',
              prop: 't8'
            }
          ]
        }
      ]),
    }
  },
  methods:{
    selectionChange(rows) {
      console.log(rows)
    },
    rowClick(row, column, event) {
      console.log('rowClick是否正常', row, column, event)
    },
  }
}
</script>

<style scoped lang="scss">

</style>
